<template>
  <div class="live app-wrapper" :data-title="title" v-title>
    <div class="lm-swipe" ref="swiper">
        <VideoPlayer :options="videoOptions" :poster="poster"></VideoPlayer>
        <router-link to="/" class="lm-button lm-button-home"><i class="icon icon-home"></i></router-link>
        <span class="lm-button lm-button-refresh" @click="refresh"><i class="icon icon-refresh"></i></span>
        <p class="counts"><i class="van-icon van-icon-user-o"></i> <span v-if="live.view_num > 0">{{live.view_num}}</span></p>
        <template v-if="live.live_status === 1 && timeStamp > 0">
          <div class="time-distance">距开始直播：
          <van-count-down :time="timeStamp" format="DD 天 HH 时 mm 分 ss 秒" /></div>
        </template>
        <div class="live-tip" v-if="live.live_status === 3">直播已经结束,稍后看回放</div>
    </div>

    <div class="tab" @click="inputPanel = ''" ref="tab">
      <div class="tab-header clearfix">
        <ul class="tab-header-list pull-left">
          <!-- <li class="tab-header-item"
            v-for="(item, index) in channels.lists"
            :key="item.name"
            :class="{'active': channels.active == item.name}"
            @click.stop="switchChannel(item, index)"
          >
            {{item.text}}
          </li> -->
          <li class="tab-header-item"
            v-for="(item, index) in navs"
            :key="item.id"
            :class="{'active': navActive == item.typename}"
            @click.stop="switchChannel(item, index)"
          >
            {{item.name}}
          </li>
        </ul>
        <div class="follow-item pull-left">
          <span class="btn-follow" @click.stop="showCodeDialog(true)">关注</span>
        </div>
      </div>

      <div class="tab-body">
        <!-- <div class="tab_track" ref="tabTrack" :style="{width: channels.lists.length * 100 + '%',transform: 'translate3d('+trackStyleLeft+'px,0,0)'}"> -->
        <div class="tab_track" ref="tabTrack" :style="{width: navs.length * 100 + '%',transform: 'translate3d('+trackStyleLeft+'px,0,0)'}">
          <div class="tab-body-item"
            v-for="(item, index) in navs"
            :key="item.id"
          >
            <keep-alive>
                <component
                  :activeTab="navActive"
                  :is="currentComponents[index]"
                  :componentName="item.typename"
                  :translateX="trackStyleLeft"
                  :parentData="parentData"
                ></component>
            </keep-alive>
          </div>
          <!-- <div class="tab-body-item">
            <Interact
              :activeTab="channels.active"
              :timeStamp="timeStamp"
              :dateTime="live.start_at"
              :componentName="componentNames[0]"
            ></Interact>
          </div>
          <div class="tab-body-item">
            <RankTab
              :activeTab="channels.active"
            ></RankTab>
          </div>
          <div class="tab-body-item">
            <SmallVideo
              :activeTab="channels.active"
            ></SmallVideo>
          </div>
          <div class="tab-body-item">
            <VotingActivities
              :votes="voteLists"
              :activeTab="channels.active"
            ></VotingActivities>
          </div>
          <div class="tab-body-item">
            <PicLive
              :activeTab="channels.active"
              :translateX="trackStyleLeft"
            ></PicLive>
          </div> -->
        </div>
        <!-- /tab_track --><!-- <Popular></Popular> -->
      </div>

    </div>

    <van-popup v-model="codeDialogShow" class="code-dialog">
      <CodeDialog
        @close-2vcode-dialog="showCodeDialog(false)"
      ></CodeDialog>
    </van-popup>


    <van-popup
      position="bottom"
      overlay="false"
      overlay-class="app-masker"
      get-container=".app-wrapper"
      v-model="isShowOptionPanel"
    >
      <div class="menu-option-lists">
        <div class="option-item">
          <i class="icon icon-share-3"></i>
          <p>邀请卡</p>
        </div>
        <div class="option-item">
          <i class="icon icon-Cash-withdrawal"></i>
          <p>提现</p>
        </div>
        <div class="option-item">
          <i class="icon icon-sign-in"></i>
          <p>签到</p>
        </div>
      </div>
      <div class="text-center"><span class="menu-option-close" @click="isShowOptionPanel = false">×</span></div>
    </van-popup>


    <div class="masker-filter" style="display: none;"></div>

    <button type="button" class="button-menu"
      v-if="channels.active !== 'chat'"
      @click.stop="isShowOptionPanel = true"
    ></button>
  </div>
</template>

<script>
import SmallVideo from './Channels/SmallVideo';
import VotingActivities from './Channels/VotingActivities';
//import RedPacket from '@/components/RedPacket.vue';

import RankTab from './Channels/RankTab';
//import Interact from './Channels/Interact';
//import VideoPlayer from '@/components/Live/VideoPlayer2';
import VideoPlayer from '@/components/Live/VideoPlayer';
import CodeDialog from '@/components/CodeDialog';
// import PicLive from './Channels/PicLive';
// import Popular from './Channels/Popular';
import {getLiveDetail} from '@/api';

let componentMaps = {
  'video': () => import('./Channels/SmallVideo'),
  //'video': () => import('./Channels/PicLive'),
  'chat': () => import('./Channels/Interact'),
  'coupon': () => import('./Channels/Coupon'),
  'intro': () => import('./Channels/Intro'),
  'rank': () => import('./Channels/RankTab'),
  'imagetext': () => import('./Channels/PicLive'),
};


import { mapState } from 'vuex';
export default {
  components: {
    // Interact,
    //RankTab,
    // SmallVideo,
    // VotingActivities,
    VideoPlayer,
    CodeDialog,
    // PicLive,
    // Popular,
    // RedPacket
  },
  props: {},
  data() {
    return {
      componentNames: ['interact'],
      isShowOptionPanel: false,
      active: 0,
      dateTime: '2019-09-15 18:30',
      voteLists: [
        {id: 1, checked: true, name: '5G智能出行，智能生活'},
        {id: 2, checked: false, name: '5G智能出行，智能生活'}
      ],
      playerOptions:{},
      live:{},
      commentsArray: [],  // 评论
      navs: [],  // 频道列表
      navActive: '',
      //showCodeDialog: false,
      channels: {
        active: 'chat',
        lists: [
          {'name': 'chat',  text: '互动',     index: 0},
          // {'name': 'intro', text: '介绍',     index: 1},
          {'name': 'rank',  text: '榜单',     index: 1},
          {'name': 'video', text: '小视频',   index: 2},
          {'name': 'vote',  text: '投票活动', index: 3},
          {'name': 'piclive',  text: '图片直播', index: 4}
        ]
      },
      title: '视频直播',
      poster: '',
			videoOptions: {
				autoplay: true,
				controls: true,
				sources: [
					{
						src: "http://proxy.hls.yy.com/livesystem/15013_xv_77890559_77890559_0_0_0-15013_xa_77890559_77890559_0_10_0.m3u8?org=yyweb&uuid=a45de43dea2c4633b3823312c031ef19&t=1568812453&tk=e9e83eaadc42cdeefa7267ef8b9b5d26",
						type: "application/x-mpegURL"
					}
				]
			}
    };
  },
  computed: {
    ...mapState({
      codeDialogShow: state => state.isShowCodeDialog
    }),
    timeStamp(){
      if(!this.live.start_at) return 0;
      return new Date(this.live.start_at).getTime() - Date.now() || new Date(this.live.start_at.replace(/-/g,'/')).getTime() - Date.now();
    },
    trackStyleLeft(){
      let width = window.innerWidth;

      // let index = this.channels.lists.findIndex(item=>{
      //   return item.name == this.channels.active;
      // });

      let index = this.navs.findIndex(item=>{
        return item.typename == this.navActive;
      });
      return -width * index;

    },
    currentComponents(){
        return this.navs.map((item)=>{
            return componentMaps[item.typename];
        });
    },
    // 需要传递到子组件的数据
    parentData(){

      if(this.navActive === 'video') return {votes: this.voteLists || []};
      return {};
    }
  },
  methods: {
    showCodeDialog(status){
      this.$store.dispatch('setCodeDialogStatus', status)
    },
    setTabHeight(){

      setTimeout(()=>{
        let playerHeight = this.$refs.swiper.offsetHeight;
        this.$refs.tab.style.height = (window.innerHeight - playerHeight) + 'px';
      }, 40)
    },
    refresh(){ location.reload(); },
    switchChannel(item, index){
      //this.channels.active = item.name;
      // scrollTop 设置为0
      this.$refs.tabTrack.scrollTop = 0;
      this.navActive = item.typename;
      console.log(this.navActive)
      //console.log(this.$refs.tabTrack.scrollTop)
    }

  },
  created() {
    getLiveDetail({id: this.$route.params.id}).then((response)=>{
      if(response.code === 0){
        let result = response.data;
        this.live = result.live;
        this.navs = result.nav.filter((item) => Boolean(item.typename));
        this.navActive = this.navs[0].typename;
        //this.playerOptions = result.playerOptions;
        this.videoOptions = result.playerOptions.sources;
        this.poster = result.playerOptions.poster;
        this.commentsArray = result.comments;
      }
    });

  },
  mounted(){
    this.$nextTick(()=>{
      this.setTabHeight();
    });
  }
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';
.live {
  overflow: hidden;
}
.lm-swipe {
  position: relative;

  .lm-button {
    display: flex;
    position: absolute;
    left: 20px;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    align-items: center;
    justify-content: center;
    font-weight: normal;
    z-index: 999;

    color: rgba(102,102,102,.6);
    background-color: rgba(255,255,255,.3);
    border-radius: 100%;
    .icon {
      color: rgba(255,255,255,.6);
      font-size: 48px;
    }
  }

  .lm-button-home { top: 48px; }
  .lm-button-refresh { bottom: 72px; }

  .counts {
    position: absolute;
    top: 42px;
    right: 24px;
    height: 48px;
    padding: 0 24px;
    font-size: 24px;
    line-height: 48px;
    color: $color-white;
    background-color: rgba(255,255,255, .4);
    border-radius: 24px;
    .van-icon {
      font-size: 32px;
      vertical-align: middle;
      position: relative;
      top: -2px;
    }
    span { margin-left: 8px; }
  }

  .time-distance, .live-tip {
    width: 100%;
    height: 64px;
    position: absolute;
    bottom: 0;
    font-size: 28px;
    color: $color-white;
    line-height: 64px;
    text-align: center;
    .van-count-down {
      display: inline-block;
      color: $color-orange;
    }
  }
}


.tab-header {
  height: 100px;
  font-size: 28px;
  line-height: 100px;
  background-color: #fff;
  .tab-header-list {
    width: 75%;
    display: flex;
  }

  .tab-header-item {
    color: #2a2a2a;
    position: relative;
    text-align: center;
    flex: 1;
    &.active{
      color: #1549eb;
      &:after {
        content: '';
        width: 100%;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #1549eb;
      }
    }

  }

  .follow-item {
    width: 25%;
    text-align: center;
    > .btn-follow {
      display: inline-block;
      width: 130px;
      height: 56px;
      line-height: 56px;
      color: #fff;
      background: linear-gradient(#103ee7, #318bff);
      border-radius: 28px;
    }
  }
}

.tab,.van-tabs {
  height: calc(100% - 350px);
  .tab-header-item, .van-tab {
    color: #2a2a2a;
    position: relative;
    text-align: center;
    flex: 1;
    &.active{
      color: #1549eb;
      &:after {
        content: '';
        width: 100%;
        height: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #1549eb;
      }
    }

  }
}

.tab-body {
  height: calc(100% - 100px);
  position: relative;
  overflow: hidden;
}


.tab_track {
  display: flex;
  width: 300%;
  height: 100%;
  transition: all ease .3s;
  .tab-body-item {
    flex: 1;
    height: 100%;
    overflow: hidden;
  }
}

.van-count-down { color: #fff; }

.button-menu {
  position: fixed;
  right: 28px;
  bottom: 72px;
}

.menu-option-lists {
  display: flex;
  .option-item {
    flex: 1;
    padding: 10px 0;
    font-size: 24px;
    color: #333;
    text-align: center;
  }

  i {
    display: inline-block;
    width: 72px;
    height: 72px;
    font-size: 64px;
  }
}

.menu-option-close {
  font-size: 48px;
}
</style>
